<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/5/24
  Time: 17:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--导入核心库--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户列表</title>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <%--<table align="center" border="1px" cellspacing="0" width="1000px" height="600px">--%>
        <table class="table table-striped table-bordered table-hover table-condensed table-responsive">
            <tr>
                <th>用户ID</th>
                <th>用户昵称</th>
                <th>用户密码</th>
                <th>真实姓名</th>
                <th>用户邮箱</th>
                <th>用户性别</th>
                <th>操作</th>
            </tr>
            <%--<c:forEach items="${allUser}" var="u">--%>
            <%--遍历用户的分页数据--%>
            <c:forEach items="${pb.list}" var="u">
                <tr>
                    <td>${u.uid}</td>
                    <td>${u.username}</td>
                    <td>${u.password}</td>
                    <td>${u.name}</td>
                    <td>${u.email}</td>
                    <td>${u.sex}</td>
                    <td>
                        <a href="javascript:void(0)" class="btn btn-primary" onclick="findUserById('${u.uid}')">修改</a>
                        <a href="javascript:void(0)" class="btn btn-danger" onclick="delUser('${u.uid}')">删除</a>
                    </td>
                </tr>
            </c:forEach>

        </table>
    </div>
    <div style="float: right;margin-right: 15px;">共<span>${pb.totalPage}</span>页 &ensp;&ensp;&ensp;
        共有<span>${pb.totalCount}</span>条记录
    </div>

<%--分页组件--%>
<div style="margin:5px 0 0 400px">
    <nav aria-label="Page navigation">
        <ul class="pagination">

            <%--判断如果是第一页,不能在往上翻页,超链接失效
                禁用状态 class="disabled"
            --%>
            <c:if test="${pb.currentPage==1}">
                <li class="disabled">
                    <a href="javascript:void(0)" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            </c:if>
            <%--如果不是第一页,往上翻页--%>
            <c:if test="${pb.currentPage!=1}">
                <li>
                    <a href="${pageContext.request.contextPath}/admin?methodName=getUserByPage&curPage=${pb.currentPage-1}&pSize=4" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            </c:if>


            <%--需要获取真实页码数--%>
           <%--遍历页码--%>
            <c:forEach begin="1" end="${pb.totalPage}" var="n">
                <%--c:if进行动态判断--%>
                <%--判断是当前页，给当前页设置状态，激活状态
                    bootstrap分页组件提供全局组件  禁用和激活状态
                    链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类。
                --%>
                <c:if test="${pb.currentPage==n}">
                    <li class="active">
                        <%--超链接失效--%>
                        <a href="javascript:void(0)">${n}</a>
                    </li>
                </c:if>
                <%--如果不是当前页,进行翻页查询--%>
                <c:if test="${pb.currentPage!=n}">
                    <li>
                        <a href="${pageContext.request.contextPath}/admin?methodName=getUserByPage&curPage=${n}&pSize=4">${n}</a>
                    </li>
                </c:if>

            </c:forEach>

          <%--  <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>--%>


            <%--判断如果是最后一页,将超链接失效,开启禁用状态--%>
             <c:if test="${pb.currentPage==pb.totalPage}">

                 <li class="disabled">
                     <a href="javascript:void(0)" aria-label="Next">
                         <span aria-hidden="true">&raquo;</span>
                     </a>
                 </li>
             </c:if>
           <%--判断如果不是最后一页,一直往下翻页--%>
           <c:if test="${pb.currentPage!=pb.totalPage}">

               <li>
                   <a href="${pageContext.request.contextPath}/admin?methodName=getUserByPage&curPage=${pb.currentPage+1}&pSize=4" aria-label="Next">
                       <span aria-hidden="true">&raquo;</span>
                   </a>
               </li>
           </c:if>


        </ul>
    </nav>
</div>

</body>
<script>
    function delUser(uid) {
        //友情提示:window里面有一个confirm:确认提示框
       var flag=  window.confirm("您确认删除吗?") ;
       if(flag){
           //点击了确定按钮
           //改变他的地址栏url
           window.location.href="${pageContext.request.contextPath}/admin?methodName=delUser&uid="+uid;
       }
    }

    function findUserById(uid){
        //alert(uid) ;
                    //get 提交  url?key=value
        window.location.href="${pageContext.request.contextPath}/admin?methodName=findUser&uid="+uid
    }
</script>
</html>
